<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-blue">
			<block slot="content">库存统计</block>
			<template slot="backText">
				<text class="cuIcon-back" @tap="beforePage"></text>
			</template>
		</cu-custom>
		<!-- 主题内容 -->
		<view  class="padding-t">
			<view class="u-main">
				<view class="u-main-title">
					各规格库存统计
				</view>
				<view class="u-main-line"></view>
				<view class="u-main-info padding2030">
					<!-- 下面表格 -->
					<view class="u-table">
						<view>
							<view class="u-table-head">
								<view class="u-table-head-item u-font-weight">钢种</view>
								<view class="u-table-head-item u-font-weight">厚度范围</view>
								<view class="u-table-head-item u-font-weight">宽度范围</view>
								<view class="u-table-head-item u-font-weight">块数</view>
								<view class="u-table-head-item u-font-weight">重量(t)</view>
							</view>
							<view class="">
								<view class="u-table-bady-column" v-for="(item,index) in list" :key="index">
									<view class="u-table-head-item">{{item.steelType}}</view>
									<view class="u-table-head-item">{{item.thicknessRange}}</view>
									<view class="u-table-head-item">{{item.widthRange}}</view>
									<view class="u-table-head-item">{{item.num}}</view>
									<view class="u-table-head-item">{{item.weight}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 库存信息 -->
			<view class="bg-white">
				<view class="u-main-info padding2030">
					<!-- 钢种分类 -->
					<view class="dashed-bottom padding-tb-30">
						<view class="flex">
							<view class="pei-250">
								<u-charts
								 :canvas-id="steelState.id" 
								 :chartType="steelState.chartType"
								 :cWidth="steelState.cWidth" 
								 :cHeight="steelState.cHeight" 
								 :title="steelState.title"
								 :extra="steelState.extra"
								 :opts="steelState.opts"
								 :ref="steelState.id" />
							</view>
							<view class="width100 margin-tb-auto">
								<view class="flex echarts-legend-height dashed-bottom" :class="item.classname" v-for="(item,index) in steelList" :key="index">
									<view class="basis-sm">{{item.classification}}</view>
									<view class="basis-sm">{{item.tonnes}}</view>
									<view class="basis-xs">{{item.percentage}}%</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 厚度范围 -->
					<view class="dashed-bottom padding-tb-30">
						<view class="flex">
							<view class="pei-250">
								<u-charts
								 :canvas-id="thinkAbout.id" 
								 :chartType="thinkAbout.chartType"
								 :cWidth="thinkAbout.cWidth" 
								 :cHeight="thinkAbout.cHeight" 
								 :title="thinkAbout.title"
								 :extra="thinkAbout.extra"
								 :opts="thinkAbout.opts"
								 :ref="thinkAbout.id" />
							</view>
							<view class="width100 margin-tb-auto">
								<view class="flex echarts-legend-height dashed-bottom" :class="item.classname" v-for="(item,indes) in thinkList" :key="indes">
									<view class="basis-sm">{{item.classification}}</view>
									<view class="basis-sm">{{item.tonnes}}</view>
									<view class="basis-xs">{{item.percentage}}%</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 宽度范围 -->
					<view class="dashed-bottom padding-tb-30">
						<view class="flex">
							<view class="pei-250">
								<u-charts
								 :canvas-id="widthAbout.id" 
								 :chartType="widthAbout.chartType"
								 :cWidth="widthAbout.cWidth" 
								 :cHeight="widthAbout.cHeight" 
								 :title="widthAbout.title"
								 :extra="widthAbout.extra"
								 :opts="widthAbout.opts"
								 :ref="widthAbout.id" />
							</view>
							<view class="width100 margin-tb-auto">
								<view class="flex echarts-legend-height dashed-bottom"  :class="item.classname" v-for="(item,indess) in widthList" :key="indess">
									<view class="basis-sm">{{item.classification}}</view>
									<view class="basis-sm">{{item.tonnes}}</view>
									<view class="basis-xs">{{item.percentage}}%</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import { post } from "@/lib/Util.js";
	import uCharts from '@/components/u-charts/component.vue';
	import {GET_SLAB_INFO, GET_SLAB_INVENTORY_INFO, GET_SLAB_SCOPESTATE_INFO} from '@/common/api/yuanliao.js'
	export default {
		components: {
			uCharts
		},
		data() {
			return {
				steelState: {
					percentage: '', // 吨数占比
					classification: '', // 分类
					tonnes: '', // 吨数
					opts: {
						series: [{
							name: 'Q235B',
							data: 0,
						}]
					},
					cWidth: uni.upx2px(250),
					cHeight: uni.upx2px(250),
					chartType: "ring",
					title: {name: '钢种分类', fontSize: 12,},
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 25,
						  labelWidth:0
						}
					},
					extraType: "",
					id: "steelfenlei"
				},
				thinkAbout: {
					opts: {
						series: [{
							name: '3.0<6.0',
							data: 0,
						}]
					},
					cWidth: uni.upx2px(250),
					cHeight: uni.upx2px(250),
					chartType: "ring",
					title: {name: '厚度范围', fontSize: 12,},
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 25,
						  labelWidth:0
						}
					},
					extraType: "",
					id: "thinkabout"
				},
				widthAbout: {
					opts: {
						series: [{
							name: 'W>1200',
							data: 0,
						}]
					},
					cWidth: uni.upx2px(250),
					cHeight: uni.upx2px(250),
					chartType: "ring",
					title: {name: '宽度范围', fontSize: 12,},
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 25,
						  labelWidth:0
						}
					},
					extraType: "",
					id: "widthabout"
				},
				colorListBlock: ['block-blue', 'block-yellow', 'block-green', 'block-purple', 'block-orange', 'block-light-blue'],
				colorlist: ['#3088F4', '#ffb708', '#08d5a5', '#7130f4', '#f47073', '#0043fe'],
				steelList: [],
				thinkList: [],
				widthList: [],
				list: []
			}
		},
		mounted() {
			this.getSteelInfo()
			this.getThinkInfo()
			this.getWidthInfo()
			this.getinfo()
		},
		methods: {
			beforePage() {
				uni.navigateBack({
					delta: 1
				});
			},
			async getSteelInfo() {
				let res = await post(GET_SLAB_INVENTORY_INFO, {
					dimension: 'steelType'
				})
				if(res.code == 0) {
					let data = []
					for(let i = 0; i<res.data.length; i++) {
						res.data[i].classname = this.colorListBlock[i]
						data.push({
							name: res.data[i].classification,
							data: res.data[i].tonnes,
							color: this.colorlist[i]
						})
					}
					this.steelState.opts.series = data
					this.steelList = res.data
				}
			},
			async getThinkInfo() {
				let res = await post(GET_SLAB_INVENTORY_INFO, {
					dimension: 'thickness'
				})
				if(res.code == 0) {
					let data = []
					for(let i = 0; i<res.data.length; i++) {
						res.data[i].classname = this.colorListBlock[i]
						data.push({
							name: res.data[i].classification,
							data: res.data[i].tonnes,
							color: this.colorlist[i]
						})
					}
					this.thinkAbout.opts.series = data
					this.thinkList = res.data
				}
			},
			async getWidthInfo() {
				let res = await post(GET_SLAB_INVENTORY_INFO, {
					dimension: 'width'
				})
				if(res.code == 0) {
					let data = []
					for(let i = 0; i<res.data.length; i++) {
						res.data[i].classname = this.colorListBlock[i]
						data.push({
							name: res.data[i].classification,
							data: res.data[i].tonnes,
							color: this.colorlist[i]
						})
					}
					this.widthAbout.opts.series = data
					this.widthList = res.data
				}
			},
			async getinfo() {
				let res = await post(GET_SLAB_SCOPESTATE_INFO)
				if(res.code == 0) {
					this.list = res.data
				}
			}
		}
	}
</script>

<style>
</style>
